<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lodash.min.js"></script>
    <style>
        html,
        body {
            width: 100%;
            display: flex;
            flex-direction: column;
            background-color: #f2f2f2;
        }

        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        .inputBox {
            margin: 0 auto;
            position: relative;
        }

        .inputBox::after {
            content: '🔍';
            position: absolute;
            left: 0;
            font-size: 18px;
            height: 100%;
        }

        input {
            height: 25px;
            width: 240px;
            position: relative;
            outline: none;
            border: 1px solid rgba(128, 128, 128, 0.3);
            border-radius: 4px;
            padding: 0 30px;

        }

        input:focus {
            border: 1px solid orangered;
        }

        ul {
            column-count: 3;
            gap: 10px;
            margin: 20px 0;
        }

        ul>li {
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
            background-color: #fff;
            border-radius: 6px;
            box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.3);
            margin: 20px 10px;
            padding: 10px;
        }

        ul>li>img {
            height: 150px;
            width: 100%;
            box-sizing: border-box;
            object-fit: cover;
            transition: all 0.5s;
        }

        ul>li>img:hover {
            transform: scale(0.9);
        }

        ul>li>h4 {
            display: -webkit-box;
            line-clamp: 2;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.5;
            max-height: 3em;
        }

        ul>li>p {
            font-size: 18px;
            font-weight: 500;
            color: brown;
        }
    </style>
</head>

<body>
    <span class="inputBox"><input type="text"></span>

    <ul></ul>

    <script>
        function $(ele) {
            return document.querySelector(ele);
        }

        const ul = $('ul');
        const input = $('input');

        function request(keyword) {
            const data = null;

            const xhr = new XMLHttpRequest();
            xhr.withCredentials = true;

            xhr.open('GET', `http://localhost:8888/goods/list?${keyword ? `search=${keyword}` : ''}`);
            xhr.setRequestHeader('accept', 'application/json');
            xhr.send(data);

            xhr.addEventListener('readystatechange', function () {
                if (this.readyState === this.DONE) {
                    let res = JSON.parse(this.responseText);
                    let goodsData = res.list;

                    ul.innerHTML = goodsData.reduce(function (total, item) {
                        return total += `<li>
                                <img src="${item.img_big_logo}" alt="">
                                <h4>${item.title}</h4>
                                <p>￥${item.current_price}</p>
                            </li>`;
                    }, '');
                }
            });
        }
        request();
        input.oninput = _.debounce(
            function () {
                let text = this.value;
                request(text);
            }
            , 1000)
    </script>
</body>

</html>